import React, { Component } from 'react';
import { Form, Icon, Input, Button } from 'antd';
import { login } from "../api";
import { getcode, getUser } from "../util/oauth";
class Login extends Component {
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields(async (err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                let res = await login(values)
                console.log(res);
                if (res.data.code === 2) {
                    localStorage.userInfo = JSON.stringify({
                        token: res.data.token
                    })
                    this.props.history.push("/home/index")
                }else{
                    alert(res.data.msg)
                }
            }
        });
    };
    gosan() {
        getcode()
    }
    componentDidMount() {
        getUser((data, token) => {
            localStorage.userInfo = JSON.stringify({
                token,
                name: data.name,
                avatar: data.avatar_url
            })
            this.props.history.push("/home/index")
        })
    }
    Registers(){
        this.props.history.push("/register")
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login">
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item>
                    {getFieldDecorator('name',)(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="用户名"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('pwd',)(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            type="password"
                            placeholder="密码"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('captcha', )(
                        <Input
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="验证码"
                        />,
                    )}
                </Form.Item>
                <img src="/getcaptcha" alt="" />
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                    <Button type="primary" style={{ marginLeft: "20px" }} onClick={this.Registers.bind(this)} className="login-form-button">
                        注册
                    </Button>
                    <Button type="primary" style={{ marginLeft: "20px" }} onClick={this.gosan.bind(this)} className="login-form-button">
                        第三方码云登录
                    </Button>
                </Form.Item>
            </Form>
            </div>
        );
    }
}

export default Form.create({ name: 'normal_login' })(Login);